<template>
	<el-menu v-if="showMenu" :default-active="$route.path" class="el-menu-vertical-demo" background-color="#324157" text-color="#bfcbd9"
		active-text-color="#25a0e4" :collapse="isCollapse" :router="routerOpen"  ref="elMenu">
		<child-menu :dataList="listData"></child-menu>
	</el-menu>
	<el-menu v-else :default-active="$route.path" class="el-menu-vertical-demo" background-color="#324157" text-color="#bfcbd9"
	 active-text-color="#25a0e4" :collapse="isCollapse" :router="routerOpen"  ref="elMenu">
		<el-menu-item index="/home">
			<i class="el-icon-home"></i>
			<span slot="title">系统简介</span>
		</el-menu-item>
		<el-menu-item index="/table">
			<i class="el-icon-cascades"></i>
			<span slot="title">基础表格</span>
		</el-menu-item>
		<el-menu-item index="/userManage">
			<i class="el-icon-user"></i>
			<span slot="title">用户管理</span>
		</el-menu-item>
		<el-menu-item index="/category">
			<i class="el-icon-setting"></i>
			<span slot="title">分类管理</span>
		</el-menu-item>
		<el-menu-item index="/tab">
			<i class="el-icon-document-copy"></i>
			<span slot="title">tab选项卡</span>
		</el-menu-item>
		<el-submenu index="1">
			<template slot="title">
				<i class="el-icon-date"></i>
				<span>表单相关</span>
			</template>
			<el-menu-item index="/form">基本表单</el-menu-item>
			<el-submenu index="4-2">
				<template slot="title">三级菜单</template>
				<el-menu-item index="/editor">富文本编辑器</el-menu-item>
				<el-menu-item index="/markdown">markdown编辑器</el-menu-item>
			</el-submenu>
			<el-menu-item index="/upload">文件上传</el-menu-item>
		</el-submenu>
		<el-menu-item index="/echart">
			<i class="el-icon-pie-chart"></i>
			<span slot="title">echart图表</span>
		</el-menu-item>
		<el-submenu index="2">
			<template slot="title">
				<i class="el-icon-rank"></i>
				<span>拖拽组件</span>
			</template>
			<el-menu-item index="/draggable">拖拽列表</el-menu-item>
			<el-menu-item index="/dialogDrag">拖拽弹框</el-menu-item>
		</el-submenu>
		<el-menu-item index="/international">
			<i class="el-icon-global"></i>
			<span slot="title">国际化功能</span>
		</el-menu-item>
		<el-submenu index="4">
			<template slot="title">
				<i class="el-icon-excel1"></i>
				<span>Excel</span>
			</template>
			<el-menu-item index="/excel/exportExcel">导出Excel</el-menu-item>
			<el-menu-item index="/excel/selectExcel">导出已选择项</el-menu-item>
			<el-menu-item index="/excel/mergerHeader">导出多级表头</el-menu-item>
			<el-menu-item index="/excel/uploadExcel">上传Excel</el-menu-item>
		</el-submenu>
		<el-menu-item index="/pdf">
			<i class="el-icon-pdf1"></i>
			<span slot="title">pdf下载</span>
		</el-menu-item>
		<el-menu-item index="/zip">
			<i class="el-icon-zip"></i>
			<span slot="title">导出zip</span>
		</el-menu-item>
		
	</el-menu>
</template>

<script>
import { isNotEmpty } from '@/plugins'
import {  getItem, removeItem, setItem } from '@/plugins/auth'
import childMenu from './childMenu.vue'
	export default {
		props: ['isCollapse'],
		components: {childMenu},
		data() {
			return {
				routerOpen:true,
				listData: [],
				showMenu: false
			}
		},
		mounted () {
			// this.listData = this.buildMenuList(roleList)
		},
		watch: {
			$route (o,v) {
				let list = JSON.parse(getItem('menuList'));
				if (list && list.length) {
					this.listData = this.buildMenuList(list)
					this.showMenu = true
				} else {
					this.showMenu = false
				}
			}
		},
		methods: {
			buildMenuList(menuResList) {
				let arrList = [];
				menuResList.map(ele => {
					let children = [],childList = [], obj={};
					obj = {
						name: ele.functionShortName,
						path: ele.functionURL,
						id: ele.id,
						icon: ele.functionCssText
					}
					children = menuResList.filter(child => (child.functionParentID === ele.functionID && child.functionLevelSeq==2))
					children.length && children.map(elecr => {
						// 构建二级菜单
						let obj1 = {},seChildren = [],seChildList = []
						seChildren = menuResList.filter(child => (child.functionParentID === elecr.functionID && child.functionLevelSeq==3))
						// console.log(seChildren,'seChildren');
						seChildren.length && seChildren?.map(elecrer => {
							// 构建二级菜单
							seChildList.push({
								name: elecrer.functionShortName,
								path: elecrer.functionURL ,
								id: elecrer.id,
								icon: elecrer.functionCssText
							})
						})
						obj1 = {
							name: elecr.functionShortName,
							path: elecr.functionURL ,
							id: elecr.id,
							icon: elecr.functionCssText
						}
						if (seChildList && seChildList.length) {
							obj1.child = seChildList
						}
						childList.push(obj1)
						if (childList && childList.length) {
							obj.child = childList
						}
					})
					if (childList && childList.length && ele.functionLevelSeq ==1) {
						obj.child = childList
					}
					if (ele.functionLevelSeq ==1) {
						arrList.push(obj)
					}
				})
				return arrList;
			}
		}
	}
</script>

<style lang="stylus">
	.el-menu-vertical-demo:not(.el-menu--collapse) 
		width 250px
	
	.el-menu
		border-right none!important
</style>
<style lang="scss">
	  /*隐藏文字*/
  .el-menu--collapse .el-submenu__title span {
    display: none;
  }

  /*隐藏 > */
  .el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
    display: none;
  }

</style>
